// 菜肴管理

<template>
  <div class="containerBox  wrap">
    <cusCard>
      <div class="searchBox">
        <el-form :model="dishesForm" :inline="true" @keyup.enter="searchHandler">
          <el-form-item label="菜肴名称">
            <el-input v-model.trim="dishesForm.dishName" placeholder="请输入菜肴名称" />
          </el-form-item>
          <el-form-item label="菜肴编号">
            <el-input v-model.trim="dishesForm.dishCode" placeholder="请输入菜肴编号" />
          </el-form-item>
          <el-form-item label="菜肴类型">
            <el-select v-model="dishesForm.dishTypeId" placeholder="请选择菜肴类型" @change="searchHandler">
              <el-option v-for="item in dishTypeList" :key="item.id" :label="item.dishTypeName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <cusButton color="#0052D9" @click="searchHandler">查询</cusButton>
            <cusButton CssObj="border-color:#0052D9;color:#0052D9" @click="resetHandler">重置
            </cusButton>
          </el-form-item>
        </el-form>

      </div>
    </cusCard>

    <cusCard class="cmt-16 wrap-table">
      <cusButton color="#0052D9" @click="addHandler('add')">
        <i-ep-plus />新增
      </cusButton>
      <el-dropdown split-button class="cml-16 cmr-16">
        导入
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="getLoadTemplate">
              <i-ep-download />下载模板</el-dropdown-item>
            <el-dropdown-item @click="importData">
              <i-ep-top />导入数据</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <cusButton CssObj="border-color:#0052D9;color:#0052D9" @click="exportHandler" :disabled="!pageObj.total">导出
      </cusButton>
      <cusTable :tableData="dishTableData" :tableColumns="tableColumns" :loading="loading" @changeCol="changeCol"
        @changeRow="changeRow" :showSelect="false">

        <template #operation="{ row }">
          <cusButton style="color:#0052D9;padding:0" :text="true" @click="addHandler('edit', row)">编辑
          </cusButton>
          <el-popconfirm width="250" confirm-button-text="确认" cancel-button-text="取消" :title="`确认删除${row.dishName}吗?`"
            @confirm="delHandler(row)">
            <template #reference>
              <cusButton style="color:#0052D9;padding:0" :text="true">删除</cusButton>
            </template>
          </el-popconfirm>
        </template>
      </cusTable>
      <div class="cmt-16 float-right">
        <cusPagination @handleSizeChange="sizeChange" @handleCurrentChange="currentChange" :all="pageObj">
        </cusPagination>
      </div>
    </cusCard>

    <editDialog ref="editDialogRef" @onInit="getDishList"></editDialog>
    <cusUploadDialog ref="uploadDialogRef" @importHandler="importHandler" title="菜肴数据导入"></cusUploadDialog>

  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import {
  reqDishList,
  reqDishTypeList,
  reqDeleteDish,
  reqExport,
  reqLoadTemplate,
  reqImportDishes,
  reqImportCover
} from "@/api/business/dishes";
import editDialog from "./components/editDialog.vue";
import { stat } from "fs";
const router = useRouter();

const formOrigin = () => ({
  dishName: "",
  dishCode: "",
  dishTypeId: "",
});
const dishesForm = ref(formOrigin());

const uploadDialogRef = ref(null);
const editDialogRef = ref(null);

const pageInit = () => ({
  total: 0,
  page: 1,
  pageSize: 10,
});
const pageObj = ref(pageInit());
const loading = ref(false);

// 重置查询
const resetHandler = () => {
  dishesForm.value = formOrigin();
  pageObj.value = pageInit();
  getDishList();
};
const sizeChange = (val: number) => {
  pageObj.value.pageSize = val;
  getDishList();
};

const currentChange = (val: number) => {
  pageObj.value.page = val;
  getDishList();
};

// 导入数据弹框
const importData = () => {
  uploadDialogRef.value.show();
};

const showRepeat = ref(true)
// 确认导入
const importHandler = (file: File) => {
  reqImportDishes(file).then(res => {
    if (res.code == 1) {
      let { state, errMsgList, repeatDishList, repeatMsgList } = res.data

      if (state == 0) {
        errMsgList.forEach(el => {
          ElMessage.warning(el)
        });
      } else if (state == 1) {
        let ctx = ''
        repeatMsgList.forEach(el => {
          ctx = ctx + el
        })
        ctx = `${ctx}  继续导入将会覆盖原数据，是否继续导入 `
        console.log(ctx, 'jfkdjkf')
        ElMessageBox.confirm(
          ctx
        ).then(() => {
          let importDishCoverReq = {
            repeatDishList
          }
          reqImportCover(importDishCoverReq).then(res => {
            if (res.code == 1) {
              ElMessage.success('导入成功')
              getDishList()
            }
          })
        })
      } else if (state == 2) {
        ElMessage.success('导入成功')
        getDishList()
      }
      uploadDialogRef.value.hideHandler()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

// 导出
const exportHandler = () => {
  reqExport({ ...dishesForm.value, }).then((res) => {
    if (res.code == 1) {
      ElMessage.info('导出中...')
      window.location.href = res.data.downloadUrl;
    } else {
      ElMessage.info(res.msg);
    }
  });
};

// 下载模板
const getLoadTemplate = () => {
  reqLoadTemplate().then((res) => {
    let blob = new Blob([res]);
    let downloadElement = document.createElement("a");
    let href = window.URL.createObjectURL(blob); //创建下载的链接
    downloadElement.href = href;
    downloadElement.download = "菜肴模板" + ".xlsx"; //下载后文件名
    document.body.appendChild(downloadElement);
    downloadElement.click(); //点击下载
    document.body.removeChild(downloadElement); //下载完成移除元素
    window.URL.revokeObjectURL(href); //释放掉blob对象
  });
};

const delHandler = (row) => {
  reqDeleteDish({ id: row.id }).then((res) => {
    if (res.code == 1) {
      ElMessage.success("删除成功");
      getDishList();
    } else {
      ElMessage.info(res.msg);
    }
  });
};

// 添加/编辑
const addHandler = (type, row) => {
  if (type == "edit") {
    editDialogRef.value.show(JSON.parse(JSON.stringify(row)));
  } else {
    editDialogRef.value.show();
  }
  editDialogRef.value.dishTypeList = dishTypeList.value;
};

const searchHandler = () => {
  getDishList();
};

// 表格列数据
const tableColumns = reactive([
  { label: "菜肴编号", prop: "dishCode", width: "120" },
  { label: "菜肴名称 ", prop: "dishName", width: "120" },
  { label: "菜肴类型", prop: "dishTypeName", width: "120" },
  { label: "简称", prop: "dishAbbreviation", width: "120" },
  { label: "创建时间", prop: "gmtCreate", width: "200" },
  {
    label: "操作",
    prop: "operation",
    slot: true,
    width: "200",
    fixed: "right",
  },
]);

const dishTableData = ref([]);
// 获取菜肴列表
const getDishList = () => {
  loading.value = true;
  reqDishList({
    ...dishesForm.value,
    currentPage: pageObj.value.page,
    pageSize: pageObj.value.pageSize,
  }).then((res) => {
    loading.value = false;
    if (res.code == 1) {
      dishTableData.value = res.data.list;
      pageObj.value.total = res.data.total;
    }
  });
};

const dishTypeList = ref([]);
// 获取菜肴类型
const getDishTypeList = () => {
  reqDishTypeList({
    currentPage: 1,
    pageSize: 3000
  }).then((res) => {
    if (res.code == 1) {
      dishTypeList.value = res.data.list;
    }
  });
};

onMounted(() => {
  getDishTypeList();
  getDishList();
});
</script>

<style lang="scss" scoped></style>